<template>
    <el-dialog title="添加权限" v-model="open">

        <el-form :model="formItem" label-width="auto">

            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="权限名称">
                        <el-input v-model="formItem.title" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="父级权限">
                        <el-cascader v-model="formItem.parentId" style="width: 100%;" :options="permissionData.rows"
                            :props="{ checkStrictly: true, value: '_id', label: 'title', emitPath: false }" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="图标">
                        <el-input v-model="formItem.icon" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="权限类型">
                        <el-select v-model="formItem.type" clearable>
                            <el-option label="菜单" value="menu"></el-option>
                            <el-option label="按钮" value="button"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="路由路径">
                        <el-input v-model="formItem.route_path" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件路径">
                        <el-input v-model="formItem.component_path" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="24">
                    <el-form-item label="排序">
                        <el-input-number v-model="formItem.order" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="formItem.is_show">
                            <el-radio label="显示" :value="1"></el-radio>
                            <el-radio label="隐藏" :value="0"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>


        <template #footer>
            <el-button @click="open = false">取消</el-button>
            <el-button type="primary" @click="onConfirm">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addPermissionApi, updatePermissionApi } from '@/api/permission';
import { useFindData } from '@/composables/findData';
import { onMounted, ref } from 'vue';

const emit = defineEmits(['findPermission'])
const open = ref(false);
const formItem = ref<any>({})

const { findPermissionAsync, permissionData } = useFindData();

onMounted(() => {
    findPermissionAsync({ creator: 'jianglan' });
})

function onConfirm() {
    if (formItem.value._id) {
        updatePermission();
    } else {
        addPermission();
    }
}

async function addPermission() {
    const res = await addPermissionApi({
        ...formItem.value,
        parentId: formItem.value.parentId ?? '0',
        creator: 'jianglan'
    })
    if (res.code == 200) {
        open.value = false;
        ElMessage.success('权限数据添加成功');
        // 新数据添加成功后，需要重新向后端发送请求获取最新的表格数据
        // findPermissionAsync({ creator: 'jianglan' })
        emit('findPermission');
    } else {
        ElMessage.error(res.message);
    }

}
async function updatePermission() {
    const res = await updatePermissionApi({
        ...formItem.value,
        parentId: formItem.value.parentId ?? '0',
        creator: 'jianglan'
    })
    if (res.code == 200) {
        open.value = false;
        ElMessage.success('权限数据修改成功');
        // 新数据添加成功后，需要重新向后端发送请求获取最新的表格数据
        // findPermissionAsync({ creator: 'jianglan' })
        emit('findPermission');
    } else {
        ElMessage.error(res.message);
    }

}

function openDialog(updateItem?: object) {
    if (updateItem) {
        // 修改
        formItem.value = { ...updateItem }
    } else {
        // 新增
        formItem.value = {};
    }
    open.value = true;
}

defineExpose({
    openDialog
})
</script>

<style scoped></style>